<template>
  <div class="number-select" v-if="!getIsPhone">
    <play-instruction :instruction="instruction"></play-instruction>
    <div class="select-area">
      <box-with-position
        :key="item.id"
        v-for="item in getCurrentLotteryState"
        :item="item"
        @click="handleUpdateData"
        class="select-row-adjust"
      ></box-with-position>
    </div>
  </div>
  <div v-else>
    <lottery-box-cleaner-phone
      :key="item.id"
      v-for="item in getCurrentLotteryState"
      :item="item"
      @click="handleUpdateData"
      class="select-row-adjust"
    ></lottery-box-cleaner-phone>
  </div>
</template>

<script>
import BoxWithPosition from '@/components/lottery-type/common/box-with-position'
import PlayInstruction from '@/components/play-instruction/play-instruction'
import LotteryBoxCleanerPhone from '@/components/lottery-type/common/lottery-box-cleaner-phone'
import { boxWithCleanerMixin } from '@/assets/js/mixin.js'

export default {
  mixins: [boxWithCleanerMixin],
  components: {
    BoxWithPosition,
    PlayInstruction,
    LotteryBoxCleanerPhone
  },
  data() {
    return {
      // 玩法说明
      instruction: '特码玩法说明',
      lotteryCount: 0
    }
  },
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @media screen and (min-width 750px) 
    .select-row-adjust >>> .active
      background $color-theme-red 
      border 1px solid $color-theme-red
      .box-top 
        color #fff
      .box-bottom 
        color #fff
  @media screen and (max-width 750px) 
    .select-row-adjust >>> .bottom   
      .box  
        width calc((100% - 40px) / 5 ) !important
        &.active 
          background $color-active-bg
          border 1px solid $color-theme-red
          .box-top 
            color #fff
          .box-bottom 
            color #fff
</style>